<template>
  <div style=" min-width: 100%; display: inline-block;">
    <!--    <div style="position: sticky;top: 0;z-index: 99">-->
    <!--      <Myheader></Myheader>-->
    <!--    </div>-->
    <!--    <div class="h-header">-->
    <!--      <div class="h-logo">-->
    <!--        <img class="logo" src="https://law.bit.edu.cn/images/logo.png" alt="">-->
    <!--      </div>-->
    <!--    </div>-->
    <div style="position: relative">
      <div style="position: relative">
        <img style="width: 100%;" class="h-background"
             src="https://law.bit.edu.cn/images/banner2.png" alt="">
      </div>
      <div style="position: relative">
        <h5 style="font-weight: normal;color: #ffffff;font-size: 2rem;position:absolute; bottom: 2rem;left:6rem">
          校友组织</h5>
      </div>
    </div>
    <!--    <div style="position:relative;">-->
    <!--      <div style="background-color: #93171f;width: 400px;padding: 10px;height: 40px;position: absolute;top: -20px">-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="container">
      <TreeChart class="tree" @click-node="clickNode" :json="treeData"/>
    </div>
    <!--    <div>-->
    <!--      <Mybottom></Mybottom>-->
    <!--    </div>-->
  </div>
</template>

<script>
import TreeChart from "vue-tree-chart";
import Mybottom from "./bottom.vue"
import Myheader from "./header.vue";
import {getOrganization} from '@/api'

export default {
  components: {
    Myheader,
    TreeChart, Mybottom
  },
  name: "gb",
  data() {
    return {
      treeData: {
        name: '法学院校友分会组织机构',
        image_url: require('../assets/default.png'),
        class: ["rootNode"],
        children: [
          {
            name: '理事会',
            image_url: require('../assets/default.png'),
            extend: false,
            children: [{
              name: "名誉会长",
              image_url: require('../assets/default.png'),
              children: [
                {
                  name: "李寿平",
                  image_url: require('../assets/李寿平.jpg')
                },
                {
                  name: "马晓龙",
                  image_url: require('../assets/马晓龙.jpg')
                }
              ],
              extend: false
            }, {
              name: "会长",
              image_url: require('../assets/default.png'),
              children: [
                {
                  name: "赵向华（94级）",
                  image_url:  require('../assets/default.png')
                }
              ],
              extend: false
            }, {
              name: "执行会长",
              image_url: require('../assets/default.png'),
              children: [
                {
                  name: "王丰（94级）",
                  image_url:  require('../assets/default.png')
                }
              ],
              extend: false
            }, {
              name: "副会长",
              image_url: require('../assets/default.png'),
              children: [{
                name: "朱彦博(94级)",
                image_url:  require('../assets/default.png')
              }, {
                name: "云凤柏(94级)",
                image_url:  require('../assets/default.png')
              }, {
                name: "李铮(95级)",
                image_url:  require('../assets/default.png')
              }, {
                name: "李凯(95级)",
                image_url:  require('../assets/default.png')
              }, {
                name: "匡高锋(95级)",
                image_url:  require('../assets/default.png')
              }, {
                name: "刘巍(96级)",
                image_url:  require('../assets/default.png')
              }, {
                name: "张维锋(96级)",
                image_url:  require('../assets/default.png')
              }, {
                name: "束方坤(97级)",
                image_url:  require('../assets/default.png')
              }],
              extend: false
            }, {
              name: "理事",
              image_url: require('../assets/default.png'),
              children: [{
                name: "周光国(94级1班)",
                image_url:  require('../assets/default.png')
              }, {
                name: "黄涛(95级1班)",
                image_url:  require('../assets/default.png')
              }, {
                name: "彭羚霞(97级1班)",
                image_url:  require('../assets/default.png')
              }, {
                name: "安卫泉(98级1班)",
                image_url:  require('../assets/default.png')
              }, {
                name: "曹少波(99级1班)",
                image_url:  require('../assets/default.png')
              }, {
                name: "贾富强(99级1班)",
                image_url:  require('../assets/default.png')
              }, {
                name: "袁虎(00级)",
                image_url:  require('../assets/default.png')
              }, {
                name: "姚驰(01级)",
                image_url:  require('../assets/default.png')
              }, {
                name: "荣家鑫(02级)",
                image_url:  require('../assets/default.png')
              }],
              extend: false
            }]
          },
          {
            name: '秘书处',
            image_url: require('../assets/default.png'),
            extend: false,
            children: [
              {
                name: "常务副会长兼秘书长",
                image_url: require('../assets/default.png'),
                children: [
                  {
                    name: "刘巍(96级)",
                    image_url:  require('../assets/default.png')
                  }
                ]
              },
              {
                name: "副秘书长",
                image_url: require('../assets/default.png'),
                children: [
                  {
                    name: "张慧峰(95级)",
                    image_url:  require('../assets/default.png')
                  },
                  {
                    name: "赵志英(96级)",
                    image_url:  require('../assets/default.png')
                  },
                  {
                    name: "彭羚霞(97级)",
                    image_url:  require('../assets/default.png')
                  },
                  {
                    name: "安卫泉(98级1班)",
                    image_url:  require('../assets/default.png')
                  },
                  {
                    name: "曹少波(99级1班)",
                    image_url:  require('../assets/default.png')
                  }, {
                    name: "贾富强(99级1班)",
                    image_url:  require('../assets/default.png')
                  }, {
                    name: "袁虎(00级)",
                    image_url:  require('../assets/default.png')
                  }
                ]
              },{
                  name: "常设秘书",
                  image_url: require('../assets/default.png'),
                  children: [
                    {
                      name: "党莹(法学院)",
                      image_url:  require('../assets/default.png')
                    }
                  ]
              }
            ]
          },
        ]
      }
    }
  },
  async mounted() {
    // const {data} = await getOrganization()
    // console.log('data: ', data);
    // this.treeData = JSON.parse(JSON.stringify(data))
  },
  methods: {
    clickNode(node) {
      console.log('node: ', node);
      node.extend = !node.extend
    }
  }
}
</script>

<style scoped>


.h-header {
  width: 100%;
  background-color: #93171f;
}

.h-logo {
  width: 1000px;
  margin: 0 auto;
  padding: 5px;
}

.logo {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center
}

.h-background {
  position: relative;
  left: 50%;
  height: auto !important;
  min-height: auto !important;
  min-width: 100%;
  transform: translate(-50%, 0);
  top: 0;
}

.container {
  padding-top: 36px;
  //display: flex;
  justify-content: center;
  background: url('https://www.tsinghua.org.cn/dfiles/18365/publish/alumni/index0/images/xwzx_bg.jpg');
  //overflow: hidden;
  width: 600px;
  overflow-x: auto;
  margin: 0 auto;
}

/deep/ .tree .node .person {
  width: 100%;
}
/deep/ .tree .node .person  .avat{
  width: 3em !important;
}
.tree {
  margin: 0 auto;

}
</style>
